<template>
  <div class="edit-popup">
    <el-form class="ls-form" ref="formRef" :rules="rules" label-width="60px">
      <el-scrollbar class="h-[400px] sm:h-[600px]">
        <el-form-item label="权限" prop="menus">
          <div>
            <el-checkbox label="展开/折叠" @change="handleExpand" />
            <el-checkbox label="全选/不全选" @change="handleSelectAll" />
            <el-checkbox v-model="checkStrictly" label="父子联动" />
            <div>
              <el-tree
                ref="treeRef"
                :data="menuTree"
                :props="{
                  label: 'label',
                  children: 'children'
                }"
                :default-checked-keys="formData.menus"
                :check-strictly="!checkStrictly"
                node-key="id"
                :default-expand-all="isExpand"
                show-checkbox
              />
            </div>
          </div>
        </el-form-item>
      </el-scrollbar>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import type { CheckboxValueType, ElTree, FormInstance } from "element-plus";
import { treeselect } from "@/api/system/menu";
import { treeToArray } from "@/utils/util";
import feedback from "@/utils/feedback";
import { SetUp } from "@element-plus/icons-vue";
const emit = defineEmits(["success", "close"]);
const treeRef = shallowRef<InstanceType<typeof ElTree>>();
const formRef = shallowRef<FormInstance>();
const isExpand = ref(false);
const checkStrictly = ref(true);
const menuArray = ref<any[]>([]);
const menuTree = ref<any[]>([]);
const formData = reactive({
  menus: [] as any[]
});

const props = defineProps({
  selTreeData: {
    type: Array,
    default: []
  }
});
//定义方法

const getOptions = async () => {
  console.log("租户类型加载菜单");

  const data = await treeselect({});
  console.log("租户类型加载菜单", data);
  menuTree.value = data;
  console.log("menuTree", menuTree);

  menuArray.value = treeToArray(data);
  formData.menus = props.selTreeData;
};

// 获取所有选择的节点包括半选中节点
const getDeptAllCheckedKeys = () => {
  const checkedKeys = treeRef.value?.getCheckedKeys();
  const halfCheckedKeys = treeRef.value?.getHalfCheckedKeys()!;
  checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
  return checkedKeys;
};

const setDeptAllCheckedKeys = () => {
  formData.menus.forEach(v => {
    nextTick(() => {
      treeRef.value?.setChecked(v, true, false);
    });
  });
};

const handleExpand = (check: CheckboxValueType) => {
  const treeList = menuTree.value;
  for (let i = 0; i < treeList.length; i++) {
    //@ts-ignore
    treeRef.value.store.nodesMap[treeList[i].id].expanded = check;
  }
};

const handleSelectAll = (check: CheckboxValueType) => {
  if (check) {
    treeRef.value?.setCheckedKeys(menuArray.value.map(item => item.id));
  } else {
    treeRef.value?.setCheckedKeys([]);
  }
};
getOptions();
onMounted(() => {
  console.log("props.selTreeData", props.selTreeData);
  nextTick(() => {
    setDeptAllCheckedKeys();
  });
});
defineExpose({
  getDeptAllCheckedKeys
});
</script>
